<template>
    <div>
        <div id="pillar" :style="{width: '100%', height: '500px'}"></div>
    </div>
</template>

<script>
    import "../../assets/js/echarts.min";

    export default {
        mounted() {
            this.myChart();
        },
        methods: {
            myChart() {
                let colorList = [
                    '#ff2600',
                    '#ffc000',
                    '#00ad4e',
                    '#0073c2',
                    '#165868',
                    '#e76f00',
                    '#316194',
                    '#723761',
                    '#00b2f1',
                    '#4d6022',
                    '#4b83bf',
                    '#f9c813',
                    '#0176c0'
                ];
                let option = {
                    color: colorList,
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        formatter: "数量：{c}"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {
                                show: true
                            },
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '10%',
                        bottom: '1%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {
                                interval: 0,
                                rotate: 0,
                                show: true,
                                splitNumber: 15,
                                textStyle: {
                                    fontSize: 10,
                                },
                            },
                            data: ['好大夫', '微医', '万方'],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '',
                            axisLabel: {
                                interval: 0,
                                rotate: 0,
                                show: true,
                                splitNumber: 30,
                                textStyle: {
                                    fontSize: 12,
                                }
                            },
                        },
                    ],
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            barWidth: 25,
                            data: [2800, 1700, 1200],
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = [
                                            '#01949B',
                                            '#EBA954',
                                            '#C23531',
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                    label: {
                                        show: false,
                                        position: 'top',
                                        formatter: '{c}%'
                                    }
                                }
                            }
                        },
                    ]
                };

                let myChart = this.$echarts.init(document.getElementById('pillar'));
                myChart.setOption(option);
            }
        }
    }
</script>

<style scoped>

</style>
